<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barcode Information</title>
<style type="text/css">
<!--
.ibox {
	border: thin solid #060;
	padding: 1px;
}

a:link {
	color: #060;
}
a:visited {
	color: #060;
}
a:hover {
	color: #060;
}
a:active {
	color: #060;
}

.ibox:focus { 
  background-color:#A5DC4B; 
}
.main {
	float: left;
}
.results {
	float: right;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
.barcode {
	padding: 2px;
	margin: 0;
}
.tsm {
	font-size: 10px;
	color:#999;
	margin: 0;
}
-->
</style>
</head>

<body>
	<script type="text/javascript" src="resources/js/classes/soundmanager2.js"></script>  	
	<script type="text/javascript">
		soundManager.url = 'resources/sounds/'; // directory where SM2 .SWFs live
		soundManager.useFlashBlock = false;
		soundManager.onload = function() {
			soundManager.createSound({
					id: 'Beep6'
				,	url: 'resources/sounds/beep-6.mp3'
			});
		}
	</script>
	<script type="text/javascript" src="resources/ext/ext-core.js"></script>	
  <div style="margin-left: 10px;" align="center">
  	<div class="main">
      <label style="font-weight:bold;"><a href="./"><img src="resources/images/biodiversity-image-server-logo.jpg" alt="Biodiveristy Image Server" width="318" height="108" border="0" /></a></label>
      <br /> 
      <hr size="1" noshade="noshade" />
      <br />
      Barcode: <input name="barcode" type="text" class="ibox" id="barcode" size="40px" value=""/>
      <br/><br/>
			<div>Last Scanned Results</div>
			<div id="tplResult" align="left"></div>
    </div>
    <div class="results" id="tplID"><a name="result" title = "View Original"><a></div> 
  </div>
  <script>
	Ext.onReady(function(){
		lastValue = "";
		Ext.get('barcode').dom.value = ''; // Reset barcode on reload
		function process(e, el) {
			var ready = false;
			var bcValue = el.value;
			if (Math.abs(lastValue.length - bcValue.length) > 1) {
				ready = true;
			}
			lastValue = bcValue;
			if(e.keyCode==13 || (ready) ){
				if (Ext.isEmpty(bcValue)){
				//	Ext.Msg.alert("Notice", "Please enter barcode.");
				}	else if(bcValue.length > 1){
					Ext.get("tplID").update("<img src=\"resources/images/loading.gif\" alt=\"Loading...\">");
					Ext.Ajax.request({
							scope: this
						,	url: 'resources/api/api.php'
						,	params: {
									cmd: 'imageList'
								,	'filter[0][data][type]': 'string'
								,	'filter[0][data][value]': bcValue
								,	'filter[0][field]': 'barcode'
							}
						,	success: function(response){
								var data = Ext.decode(response.responseText);
								var found = false;
								if(Ext.isEmpty(data.records)){
									soundManager.play('Beep6');
									var t = new Ext.Template(
										'<p align="center">Barcode {barcode} not found.</p>'
									);
									t.overwrite('tplID', {
										barcode: bcValue
									});
//									found = false;
								} else {
									for(var i=0; i<data.records.length; i++) {
									var fileName = data.records[i].filename;
									var mediumFileName = fileName.split(".");
									var path = data.records[i].path + mediumFileName[0] + '_l.' + mediumFileName[1];
									var barcode = data.records[i].barcode;
									var t = new Ext.Template(
											'<p class="barcode" align="center">Barcode: {barcode}</p>'
										,	'<p class="tsm">Last Modified: {timestamp_modified}</p>'
										,	'<p align="center"><a href={orig} title="View Original" target="_blank"><img align="center" src={path}></p>'
									);
									if(i==0) {
										t.overwrite('tplID', {
											path: path
										,	orig: data.records[i].path + mediumFileName[0] + '.' + mediumFileName[1]
										,	barcode: barcode	
										,	timestamp_modified: data.records[i].timestamp_modified
									});
									} else {
										t.append('tplID', {
											path: path
										,	orig: data.records[i].path + mediumFileName[0] + '.' + mediumFileName[1]
										,	barcode: barcode	
										,	timestamp_modified: data.records[i].timestamp_modified
										});
									}
									var barcodeValue = barcode + ' found.'
									var t2 = new Ext.Template(
										'<br><span class="foundcode" title="Click to View Original" path={path} barcode={barcode} >{barcode}</span>'
									);
									t2.append('tplResult', {
											path: path
										,	barcode: barcodeValue
										,	timestamp_modified: data.records[i].timestamp_modified
									});
									}
									found = true
								}
								var t1 = new Ext.Template(
									'<br><span>{barcode}</span>'
								);
								if(!found){
									t1.append('tplResult', {
										barcode: bcValue + ' not found.'
									});
								} 
								var arrLastResult = Ext.get('tplResult').dom.innerHTML.split('<br>');
								if(arrLastResult[0]==''){
									arrLastResult.splice(0,1);
								}
								if(arrLastResult.length > 20){
									arrLastResult.splice(0,1);
									var lastResult = arrLastResult.join('<br>')
									Ext.get("tplResult").update(lastResult);
								}
								Ext.fly('tplResult').select('span.foundcode').on('click',function(e, el){
									tplLoad(e, el);
								});
							}
						,	failure: function(result){}
					});
					el.value = '';
					lastValue = '';
				}
			}
		}

		function tplLoad(e, el){
			var t = new Ext.Template(
					'<p align="center">Barcode: {barcode}</p>'
				,	'<p align="center"><a href={path} title="View Original" target="_blank"><img align="center" src={path}></p>'
			);
			t.overwrite('tplID', {
					path: el.attributes.getNamedItem('path').nodeValue
				,	barcode: el.attributes.getNamedItem('barcode').nodeValue
			});
		}
		Ext.get('barcode').on('keypress', process, this, {
				delay: 100
		});	
		Ext.get('barcode').focus();
	});
  </script>
</body>
</html>
